<template>
	<view class="ftg-container">
		<sub-title>{{title}}</sub-title>

		<view class="content-box radios-box height">
			<view class="u-page__tag-item" v-for="(item, index) in radios" :key="index">
				<u-tag :text="item.name" :name="item.value" :plain="!item.checked" type="info" @click="radioClick"></u-tag>
				<!-- <u-tag
					:class="{ 'active-tag': item.value+1 === currentValue+1||(activeValue+1&&activeValue+1==item.value+1)}"
					:bgColor="item.value+1 === currentValue+1||(activeValue+1&&activeValue+1==item.value+1)?'#E8EEF3':'#fff'"
					:color="item.value+1 === currentValue+1||(activeValue+1&&activeValue+1==item.value+1)?'#2289FF':'#606266'"
					:borderColor="item.value+1 === currentValue+1||(activeValue+1&&activeValue+1==item.value+1)?'#2289FF':'#C0C4CC'"
					:text="item.name" :name="item.value" @click="radioClick">
				</u-tag> -->
			</view>
		</view>

		<view class="content-box">
			<slot>

			</slot>
		</view>

	</view>

</template>

<script>
	import SubTitle from './SubTitle'
	export default {
		name: "FilterTagGroup",
		components: {
			SubTitle
		},
		props: {
			list: {
				type: Array,
				default: () => []
			},
			title: {
				type: String,
				default: "Title"
			},
			// 是否清除上次选中记录
			clearecord: false,
		},
		data() {
			return {
				currentValue: undefined,
				radios: [],
			}
		},
		methods: {
			radioClick(name) {
				this.currentValue = name
				this.$emit('tagClick', name)

				this.radios.map(item => {
					item.checked = item.value === name ? true : false;
				});
			},
			reset() {
				this.currentValue = undefined
				this.radios.forEach(item=>{
					item.checked=false
				})
			}
		},
		watch: {
			/* activeValue: {
				handler(v) {
					if (this.clearecord) {
						this.currentValue = undefined
						this.radios.forEach(item=>{
							item.checked=false
						})
					}
				}
			}, */
			list: {
				handler(newVal) {
					this.radios = newVal.map(it => {
						return {
							name: it.name,
							value: it.value,
							checked: false,
						}
					})
					// console.log(this.radios, 'this.radios');
				},
				deep: true,
				immediate: true
			}
		}

	}
</script>

<style lang="scss" scoped>
	.ftg-container {
		margin: 30rpx 28rpx;
		margin-top: 0;
	}

	.radios-box {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.height {
		max-height: 200rpx;
		overflow: hidden;
		overflow-y: auto;
	}

	.content-box {
		margin: 28rpx 20rpx;
		margin-bottom: 0;
	}

	/* ::v-deep .active-tag .u-tag--primary {
		border: 1px solid #2289FF !important;
		background: #E8EEF3 !important;
	}

	::v-deep .active-tag .u-tag__text--primary {
		color:  !important;
	} */
</style>